.m {
    width: 100vw;
    background-color: #f7f7f7;
}

.m-search {
    display: flex;
    width: 100vw;
    font-size: 3.2vw;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.m-search-input {
    width: 80vw;
    height: 9.6vw;
    padding-left: 6.4vw;
    font-size: 4.266vw;
    border: none;
    border-top: 0.266vw solid #e6e6e6;
    border-bottom: 0.266vw solid #e6e6e6;
    background-color: #fff;
}

.m-search-btn {
    display: flex;
    width: 20vw;
    height: 9.6vw;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.533vw;
    background-color: #30aefb;
    color: #fff;
}

.m-box {
    width: 100vw;
    padding-bottom: 4vw;
    font-size: 3.2vw;
    color: #4d4d4d;
    overflow: hidden;
}

.m-box-card {
    display: flex;
    width: 87.2vw;
    margin: 2.666vw auto;
    border-radius: 2.666vw;
    flex-direction: column;
    box-shadow: 0 0 5.333vw #e6e6e6;
    overflow: hidden;
}

.m-box-card-top {
    display: flex;
    position: relative;
    flex-direction: column;
    background-color: #fff;
}

.m-box-card-top .top-title {
    display: flex;
    min-height: 12.4vw;
    padding-top: 3.2vw;
    padding-bottom: 1.6vw;
    font-size: 4.266vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 0.266vw solid #e6e6e6;
}

.m-box-card-top .top-main {
    display: flex;
    height: 77.666vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.m-box-card-top .main-type {
    margin-bottom: 2.133vw;
    font-size: 5.866vw;
    color: #fba330;
}

.m-box-card-top .main-QR {
    width: 41.6vw;
    height: 41.6vw;
    border: 0.266vw solid #e6e6e6;
    overflow: hidden;
}

.m-box-card-top .main-code {
    margin-top: 2.133vw;
    font-size: 4.8vw;
}

.m-box-card-top .main-btn {
    display: flex;
    width: 42.666vw;
    height: 10.4vw;
    margin: 2.133vw auto 0;
    font-size: 4vw;
    border-radius: 1.6vw;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.533vw;
    color: #fff;
    background-color: #00b1ff;
}

.m-box-card-top .btn-icon {
    width: 8vw;
    height: 7.466vw;
    margin-right: 4.266vw;
    background: url('http://cdn.11cm.com.cn/yezi/web/icon_pace.png') no-repeat center / 8vw 7.466vw;
}

.m-box-card-top .top-row {
    margin-left: 6.4vw;
    line-height: 10.133vw;
    border-bottom: 0.266vw solid #e6e6e6;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.m-box-card-top .row-tips {
    float: right;
    margin-right: 2.666vw;
}

.m-box-card-top [class^='top-status'] {
    position: absolute;
    top: 46.4vw;
    right: 4vw;
    z-index: 288;
    width: 32.8vw;
    height: 32.8vw;
}

.m-box-card-top .top-status-0 {
    background: url('https://cdn.11cm.com.cn/yezi/WebStore/Store1812/icon-status-0.png') no-repeat center / 32.8vw 32.8vw;
}

.m-box-card-top .top-status-1 {
    background: url('https://cdn.11cm.com.cn/yezi/WebStore/Store1812/icon-status-1.png') no-repeat center / 32.8vw 32.8vw;
}

.m-box-card-top .top-status-2 {
    background: url('https://cdn.11cm.com.cn/yezi/WebStore/Store1812/icon-status-2.png') no-repeat center / 32.8vw 32.8vw;
}

.m-box-card-top .top-status-3 {
    background: url('https://cdn.11cm.com.cn/yezi/WebStore/Store1812/icon-status-3.png') no-repeat center / 32.8vw 32.8vw;
}

.m-box-card-top .top-status-4 {
    background: url('https://cdn.11cm.com.cn/yezi/WebStore/Store1812/icon-status-4.png') no-repeat center / 32.8vw 32.8vw;
}

.m-box-card-top .top-row:last-of-type {
    border-bottom: 0;
}

.m-box-card-top .top-more {
    position: absolute;
    bottom: -4.8vw;
    left: 27.6vw;
    width: 32vw;
    height: 6.666vw;
    line-height: 3.2vw;
    text-align: center;
    font-size: 3.2vw;
    background: url('https://cdn.11cm.com.cn/yezi/WebStore/Store1812/icon-btm.png') no-repeat center / 32vw 6.666vw;
}

.m-box-card-btm {
    display: flex;
    padding: 5.333vw 2.666vw;
    margin-top: 2.666vw;
    background-color: #fff;
}

.m-box-card-btm .btm-rahmen {
    width: 36.533vw;
    height: 22.666vw;
    margin-right: 2.666vw;
    background-color: #e6e6e6;
    overflow: hidden;
}

.m-box-card-btm .btm-info {
    display: flex;
    width: 42.666vw;
    flex-direction: column;
}

.m-box-card-btm .info-theme {
    display: -webkit-box;
    height: 12.266vw;
    font-size: 4.266vw;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;    
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-box-card-btm .info-site,
.m-box-card-btm .info-date {
    width: 100%;
    font-size: 3.2vw;
    color: #7f7f7f;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.m-tips {
    width: 87.2vw;
    font-size: 3.2vw;
    padding-top: 2.666vw;
    padding-bottom: 2.666vw;
    margin: 0 auto;
}

.m-tips-text {
    margin-bottom: 5.333vw;
    color: #7e7e7e;
}

.m-tips-copyright {
    text-align: center;
    color: #30aefb;
}

/* Swiper Reset */
.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: -1px;
}

.swiper-pagination-bullet-active {
    background-color: #30aefb;
}
/* Swiper Reset End */

/* Vant Icon */
.van-icon {
    margin-right: 0.8vw;
    vertical-align: middle;
}

@media screen and (min-width: 768px) {
    .m {
        width: 60%;
        user-select: none;
        background-color: #fff;
    }

    .m-search {
        display: flex;
        width: 95%;
        margin: 20px auto 10px;
        font-size: 16px;
        justify-content: start;
        align-items: center;
    }

    .m-search-rg {
        display: flex;
        width: 60%;
    }
    
    .m-search-input {
        width: 80%;
        height: 36px;
        padding-left: 24px;
        margin-left: 16px;
        font-size: 16px;
        border-left: 1px solid #00bcd4;
        border-width: 1px;
        border-color: #00bcd4;
        box-sizing: border-box;
    }

    .m-search-btn {
        width: 20%;
        height: 36px;
        letter-spacing: 2px;
        background-color: #00bcd4;
        cursor: pointer;
    }

    .m-ticket {
        display: flex;
        position: relative;
        width: 95%;
        padding: 16px 34px 30px;
        margin: 20px auto 10px;
        border: 1px solid #e6e6e6;
        background-color: #fff;
        box-sizing: border-box;
    }

    .m-ticket-rahmen {
        width: 21.625vw;
        height: 12.235vw;
        margin-right: 48px;
        background-color: #e6e6e6;
        overflow: hidden;
    }

    .m-ticket-info {
        display: flex;
        flex-direction: column;
    }

    .m-ticket-info-theme {
        margin-bottom: 12px;
        font-size: 24px;
        font-weight: bold;
    }

    .m-ticket-info-site,
    .m-ticket-info-date {
        margin-bottom: 4px;
        font-size: 16px;
    }

    .m-ticket-info-text {
        font-size: 15px;
    }
        
    .m-ticket [class^='m-ticket-status'] {
        position: absolute;
        top: 16px;
        right: -2px;
        z-index: 888;
        width: 72px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 18px;
        color: #fff;
    }

    .m-ticket .m-ticket-status-0 {
        background: linear-gradient(to right, #24ceff, #30aefb);
    }

    .m-ticket .m-ticket-status-1 {
        background: linear-gradient(to right, #ffc323, #fba330);
    }

    .m-ticket .m-ticket-status-2 {
        background-color: #828282;
    }

    .m-ticket-link {
        position: absolute;
        bottom: 30px;
        right: 34px;
    }

    .m-ticket-link-text {
        margin-right: 6px;
        color:#828282;
    }

    .m-ticket-link-qr {
        margin-right: 0;
        font-size: 24px;
        vertical-align: text-bottom;
        cursor: pointer;
    }

    .m-ticket-qr {
        position: absolute;
        bottom: -112px;
        right: -54px;
        z-index: 8888;
        width: 112px;
        padding: 8px;
        text-align: center;
        border: 1px solid #e6e6e6;
        background-color: #fff;
        box-sizing: border-box;
        color: #898989;
    }

    .m-box {
        display: flex;
        width: 100%;
        padding: 0 0.5vw 15px;
        flex-wrap: wrap;
        font-size: 12px;
    }

    .m-box-card {
        width: 327px;
        margin: 10px 24px;
        border-radius: 10px;
        box-shadow: 0 0 20px #e6e6e6;
    }
    
    .m-box-card-top .top-title {
        min-height: 66.5px;
        padding-top: 12px;
        padding-bottom: 6px;
        font-size: 16px;
        border-bottom-width: 1px;
    }

    .m-box-card-top .top-main {
        height: 291px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .m-box-card-top .main-type {
        margin-bottom: 8px;
        font-size: 22px;
        color: #fba330;
    }

    .m-box-card-top .main-QR {
        width: 156px;
        height: 156px;
        border-width: 1px;
    }

    .m-box-card-top .main-code {
        margin-top: 8px;
        font-size: 18px;
    }

    .m-box-card-top .main-btn {
        width: 160px;
        height: 39px;
        margin: 8px auto 0;
        font-size: 15px;
        border-radius: 6px;
        letter-spacing: 2px;
        background-color: #00bcd4;
    }

    .m-box-card-top .btn-icon {
        width: 30px;
        height: 28px;
        margin-right: 16px;
        background-size: 30px 28px;
    }

    .m-box-card-top .top-row {
        margin-left: 24px;
        line-height: 38px;
        border-bottom-width: 1px;
    }

    .m-box-card-top .row-tips {
        margin-right: 10px;
    }

    .m-box-card-top [class^='top-status'] {
        top: 174px;
        right: 15px;
        width: 123px;
        height: 123px;
        background-size: 123px 123px;
    }

    .m-box-card-top .top-more {
        bottom: -18px;
        left: 103.5px;
        width: 120px;
        height: 25px;
        line-height: 12px;
        font-size: 12px;
        background-size: 120px 25px;
    }

    .m-box-card-btm {
        padding: 20px 10px;
        margin-top: 10px;
    }

    .m-box-card-btm .btm-rahmen {
        width: 137px;
        height: 85px;
        margin-right: 10px;
    }

    .m-box-card-btm .btm-info {
        width: 160px;
    }

    .m-box-card-btm .info-theme {
        height: 46px;
        font-size: 16px;
    }

    .m-box-card-btm .info-site,
    .m-box-card-btm .info-date {
        font-size: 12px;
    }

    .m-tips {
        width: 327px;
        font-size: 12px;
        margin: 10px auto;
    }

    .m-tips-text {
        margin-bottom: 20px;
    }
}
